import { useState, useEffect } from 'react';

const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};

const useBreakpoint = () => {
  const [screenSize, setScreenSize] = useState(() => getScreenSize(window.innerWidth));

  useEffect(() => {
    const debounce = (func, wait) => {
      let timeout;
      return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func(...args), wait);
      };
    };

    const handleResize = debounce(() => {
      setScreenSize(getScreenSize(window.innerWidth));
    }, 300); // 设置300毫秒的防抖时间

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return screenSize;
};

const getScreenSize = width => {
  const screenSize = {};

  Object.keys(breakpoints).forEach(breakpoint => {
    screenSize[breakpoint] = width >= breakpoints[breakpoint];
  });

  return screenSize;
};

export default useBreakpoint;
